<template>
  <el-dialog title="调查问卷详情" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form label-width="120px" disabled>
      <el-form-item label="调查问卷标题">
        <el-input v-model="dataForm.title"></el-input>
      </el-form-item>
      <el-form-item label="调查问卷前言">
        <el-input type="textarea" v-model="dataForm.preface"></el-input>
      </el-form-item>
      <el-form-item v-for="(item,index) in dataForm.wxQuestionnaireProblemLink" :label="'【' + (index + 1) + '】题'">
        <!-- <el-button type="primary" @click="addNewQuestion">问题新增</el-button> -->
        <table>
          <tr>
            <td width="80px">问题描述</td>
            <td>
              <el-input v-model="item.problemDescription"></el-input>
            </td>
          </tr>
          <tr v-for="(answerItem,answerIndex) in item.answerList">
            <td>{{answerItem.name}}</td>
            <td>
              <el-input v-model="answerItem.answer"></el-input>
            </td>
          </tr>
        </table>
      </el-form-item>
      <el-form-item label="调查问卷结束语">
        <el-input type="textarea" v-model="dataForm.conclusion"></el-input>
      </el-form-item>
      <el-form-item label="奖励方式">
        <el-radio-group v-model="dataForm.rewardType">
          <el-radio :label="1">无奖励</el-radio>
          <el-radio :label="2">奖励</el-radio>
        </el-radio-group>
        <el-input v-if="dataForm.rewardType == 2" v-model="dataForm.rewardIntegral" style="width: 160px;margin-left: 25px;">
          <template slot="append">积分</template>
        </el-input>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  import { checkQuestionDetail } from '@/api/mp/wxquestionnaire'
  export default {
    data(){
      return {
        visible: false,
        ischeck: false,
        dataForm: {
          title: '',
          preface: '',
          wxQuestionnaireProblemLink: [{
            problemDescription: '',
            answerList: [{
              name: 'A',
              answer: ''
            }]
          }],
          conclusion: '',
          rewardType: 1,
          rewardIntegral: ''
        },
        optList: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T']
      }
    },
    methods: {
      init(id){
        this.visible = true
        this.dataForm.id = id || 0
        this.$nextTick(() => {
          if(this.dataForm.id){
            checkQuestionDetail(this.dataForm.id).then(response => {
              this.dataForm = response.data.data
            })
          }
        })
      },
      // 问题新增
      addNewQuestion(){
        let obj = {
          problemDescription: '',
          answerList: [{
            name: 'A',
            answer: ''
          }]
        }
        this.dataForm.wxQuestionnaireProblemLink.push(obj)
      },
      // 问题删除
      questionDelHandle(index){
        this.dataForm.wxQuestionnaireProblemLink.splice(index,1)
      },
      // 新增选项
      addNewAnswer(index){
        let obj = {
          answer: ''
        }
        this.dataForm.wxQuestionnaireProblemLink[index]['answerList'].push(obj)
        this.dataForm.wxQuestionnaireProblemLink[index]['answerList'].forEach((item,index1) => {
          this.dataForm.wxQuestionnaireProblemLink[index]['answerList'][index1]['name'] = this.optList[index1]
        })
      },
      // 删除选项
      answerDelHandle(index,dIndex){
        this.dataForm.wxQuestionnaireProblemLink[index]['answerList'].splice(dIndex,1)
        this.dataForm.wxQuestionnaireProblemLink[index]['answerList'].forEach((item,index1) => {
          this.dataForm.wxQuestionnaireProblemLink[index]['answerList'][index1]['name'] = this.optList[index1]
        })
        this.dataForm.wxQuestionnaireProblemLink = [...this.dataForm.wxQuestionnaireProblemLink]
      }
    }
  }
</script>

<style>
  table {
    width: 100%;
  }

  tr td {
    border: solid 1px #e7e7e7;
  }
</style>
